<template>
    <div class="page">
        <!-- <div class="page-search"></div> -->
        <div class="page-body">
            <div class="toolbar">
                <div class="toolbar_left">
                    <el-button type="info" @click="refresh">刷新</el-button>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                    <el-button type="danger" :disabled="checkIds.length <= 0"
                        @click="handleDelete(checkIds)">删除</el-button>
                </div>
                <div class="toolbar_right">
                </div>
            </div>
            <div class="table">
                <el-table v-loading="loading" border :data="tableData" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="名称" prop="name" />
                    <el-table-column label="标识" prop="label" />
                    <el-table-column label="备注" prop="remark" />
                    <el-table-column label="创建时间" prop="createTime">
                        <template #default="{ row }">
                            <p>{{ dateFormat(row.createTime) }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="更新时间" prop="updateTime">
                        <template #default="{ row }">
                            <p>{{ dateFormat(row.updateTime) }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="default" size="small" @click="handleEdit(row)">
                                编辑
                            </el-button>
                            <el-popconfirm title="你确认要删除吗？" @confirm="handleDelete(row.id)">
                                <template #reference>
                                    <el-button type="danger" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog v-model="dialog.visible" :title="dialog.title" destroy-on-close>
            <UpsertForm ref="upsertForm" @cancel="handelCancel" @success="handleSuccess" />
        </el-dialog>
    </div>
</template>

<script>
import { getRoleList, delRole } from '@/api/role'
import UpsertForm from './components/upsert-form.vue'
import { ElMessage } from 'element-plus'
import dateMixin  from '@/mixins/data-mixin'

export default {
    mixins: [dateMixin],
    components: {
        UpsertForm,
    },
    data() {
        return {
            //数据请求中
            loading: false,
            // 表格数据
            tableData: [],
            //当前勾选的数据集合
            checkIds: [],
            //dislog相关的状态数据
            dialog: {
                //控制dialog
                visible: false,
                //标题
                title: '新增',
            },
        }
    },
    methods: {
        /**
         * 获取数据
         */
        refresh() {
            this.loading = true
            getRoleList().then((data) => {
                // console.log("data", data)
                this.tableData = data
            }).finally(() => {
                this.loading = false
            })
        },
        /**
         * 处理勾选
         */
        handleSelectionChange(rows) {
            this.checkIds = rows.map((item) => item.id)
        },
        /**
         * 新增处理 
         */
        handleAdd() {
            this.dialog.title = '新增'
            this.dialog.visible = true
        },
        /**
         * 编辑处理
         */
        handleEdit(row) {
            // console.log(row);
            this.dialog.title = '编辑'
            this.dialog.visible = true
            //需要等待组件创建并挂载完成，才能获取到组件的实例
            this.$nextTick(() => {
                this.$refs.upsertForm.setModel({
                    id: row.id,
                    name: row.name,
                    label: row.label,
                    remark: row.remark,
                    menuIdList: row.menuIdList,
                })
            })
        },
        /**
         * 删除处理
         * @param id 
         */
        handleDelete(id) {
            //id可能是一个数字也可能是一个数组
            delRole({
                ids: Array.isArray(id) ? id : id
            }).then(() => {
                ElMessage.success("删除成功")
                this.refresh()
            })

        },
        /**
         * 处理新增或编辑的取消
         */
        handelCancel() {
            this.dialog.visible = false
        },
        /**
         * 处理新增或编辑成功
         */
        handleSuccess() {
            ElMessage.success('操作成功')
            //刷新数据
            this.refresh()
            //关闭弹窗
            this.dialog.visible = false
        },

    },
    created() {
        this.refresh()
    }
}
</script>

<style lang="scss" scoped>
.page-search {
    height: 80px;
    border: 1px solid #000;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    background-color: powderblue;

    &_left {
        flex: 1;
    }

    &_right {
        width: 100px;
        height: 36px;
        background-color: rgb(153, 255, 0);
    }

}
</style>